<template>
    <div id="ticket">
        <div class="row">
            <div class="col-md-12">
                <condition @GetTicketCondition="getCondition"></condition>
            </div>
        </div>        
        <div class="row">
            <div class="col-md-12">
                <el-table :data="tickets" size="small" border style="width: 100%">
                    <el-table-column fixed align="center" prop="UserId" label="编号" width="60"></el-table-column>
                    <el-table-column fixed align="center" prop="State" label="状态" width="80">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.State == -1" type="info">已删除</el-tag>
                            <el-tag v-if="scope.row.State == 0">未激活</el-tag>
                            <el-tag v-if="scope.row.State == 1" type="success">已激活</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed align="center" prop="TicketNo" label="门票序列号"></el-table-column>
                    <el-table-column fixed align="center" label="门票价格">
                        <template slot-scope="scope">
                            <i class="fa fa-cny"></i>
                            <span>{{ scope.row.Price|currency }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed align="center" prop="PassportNo" label="通行证号"></el-table-column>
                    <el-table-column fixed align="center" label="购买人姓名">
                        <template slot-scope="scope">
                            <user-detail :user="scope.row.Passport.User"></user-detail>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="门票类型">
                        <template slot-scope="scope">
                            <span>{{ getTicketType(scope.row.TicketType) }}</span>
                        </template>                          
                    </el-table-column>
                    <el-table-column align="center" label="创建时间">
                        <template slot-scope="scope">
                            <span>{{ scope.row.CreateTime | time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="100" v-if="authorize(['ROOT'])">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" v-if="scope.row.State != -1" @click="remove(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>                 
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pageCount"></el-pagination>
            </div>
        </div>    
    </div>
</template>

<script>

import Condition from './condition.vue';
import UserDetail from 'views/user/user_detail.vue';
import {ShowSuccess, TimeFormat, CurrencyFormat} from 'web/utils';

export default {
    components: {
        Condition,
        UserDetail
    },
    filters: {
        time: TimeFormat,
        currency: CurrencyFormat
    },
    data() {
        return {
            tickets: [],
            pageCount: 0,
            pageSize: 10,
            condition: { },
            words: {
                prices: {}
            }
        }
    },
    mounted() {
        // 加载门票类型
        this.$DataService.GetPricesByType('APHF|CONCERT')
            .then(ret => {
                this.words.prices = ret;
            });
    },
    methods: {
        // 处理页面索引变化消息
        handleCurrentChange(val) {
            this.$TicketService.QueryTickets(this.condition, val, this.pageSize)
                .then(ret => {
                    this.tickets = ret;
                });            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.query(this.condition);
        },

        // 获取查询条件并进行查询
        getCondition(condition) {
            this.condition = condition;
            this.query(this.condition);
        },

        getTicketType(val) {
            return this.words.prices[val].PriceName;
        },

        // 条件查询
        query(condition) {
            Promise.all([
                this.$TicketService.QueryTicketsCount(condition),
                this.$TicketService.QueryTickets(condition, 1, this.pageSize)
            ]).then(ret => {
                this.pageCount = ret[0];
                this.tickets = ret[1];
            });
        },   
        
        // 删除门票
        remove(ticket) {
            this.$confirm(`确定要删除门票 ${ticket.TicketNo} ${ticket.Passport.User.Name} ${this.getTicketType(ticket.TicketType)} 吗？`, '删除门票', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'}).then(() => {
                this.$TicketService.Remove(ticket.TicketId)
                    .then(ret => {
                        if(ret) {
                            ticket.State = -1; 
                            ShowSuccess(`门票 ${ticket.TicketNo} ${ticket.Passport.User.Name} ${this.getTicketType(ticket.TicketType)} 已经删除。`,'删除门票');                        
                        }
                    });
            });
        }
    }
}
</script>

<style>

</style>
